/* Transfer S — shared calculator styling
   SyncWealth clay + glass system (thick borders, offset shadows,
   DM Sans/Space Grotesk), matching app/index.html and waitlist/index.html.
   This file is the single stylesheet all 19 calculators + the calculator
   index share — editing tokens/components here upgrades every calculator
   at once, without touching each page's markup.

   Migrated from the earlier green/Manrope system (2026-08) after a pilot
   on real-statement.html confirmed the direction. All selectors below keep
   their original names so existing calculator markup needs no changes —
   only the visual system underneath moved. Legacy custom-property names
   (--ink, --accent, --line, etc.) are aliased to the new clay tokens so any
   page-local <style> block or inline style="color:var(--good)" written
   against the old system keeps resolving correctly. */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Space+Grotesk:wght@400;500;600;700;800&display=swap");

:root {
  /* ---- Clay palette (source of truth) ---- */
  --em: #10b981;
  --em-dark: #059669;
  --em-light: #d1fae5;
  --em-xlight: #ecfdf5;
  --bg: #f7f5f0;
  --bg2: #fff;
  --text: #1a1a2e;
  --text-muted: #6b7280;
  --purple: #7c3aed; --purple-light: #ede9fe;
  --yellow: #f59e0b; --yellow-light: #fef3c7;
  --pink: #ec4899; --pink-light: #fce7f3;
  --blue: #3b82f6; --blue-light: #dbeafe;
  --orange: #f97316; --orange-light: #ffedd5;
  --red: #ef4444; --red-light: #fee2e2;
  --good: var(--em);
  --bad: var(--red);
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 24px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Legacy aliases (old green/Manrope token names, kept resolvable) ---- */
  --card: #fff;
  --ink: var(--text);
  --ink-soft: var(--text-muted);
  --ink-muted: #9aa0a6;
  --line: rgba(26, 26, 46, 0.15);
  --accent: var(--em);
  --accent-hover: var(--em-dark);
  --accent-soft: var(--em-xlight);
  --warn: var(--yellow);
  --warn-soft: var(--yellow-light);
  --bad-soft: var(--red-light);
  --shadow: 4px 4px 0 var(--text);
  --shadow-hover: 5px 5px 0 var(--text);

  font-size: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "DM Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: "Space Grotesk", sans-serif; line-height: 1.2; }

.page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 28px 20px 76px;
}

/* ---- Wide sidebar layout (opt-in) ----
   Most calculators are one input card feeding one result — the narrow
   centered .page column above suits that fine. A calculator whose inputs
   and results are both substantial (many fields, a chart, a long table)
   reads better with a fixed input sidebar and a wide content area instead,
   the way a dashboard tool would — add .page-wide to widen the column,
   then wrap the input card(s) in .tool-sidebar and the results (hero,
   chart, table cards) in .tool-main inside a .tool-layout grid. First
   built for practice/aum-trail-projector.html. Collapses to the normal
   single-column stack under 900px. */
.page.page-wide { max-width: 1400px; }
.tool-layout { display: grid; grid-template-columns: 340px 1fr; gap: 22px; align-items: start; }
.tool-sidebar { position: sticky; top: 20px; display: flex; flex-direction: column; }
.tool-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.tool-main .card, .tool-main .result-hero { margin-bottom: 0; }
@media (max-width: 900px) {
  .tool-layout { grid-template-columns: 1fr; }
  .tool-sidebar { position: static; }
}

/* A table's first column is almost always a short "Year N" / "Month N"
   label — never worth wrapping to a second line, which the wider content
   column above made newly possible for some tables. */
.table-wrap th:first-child, .table-wrap td:first-child { white-space: nowrap; }

/* Gated calculators (body[data-requires-auth]) start hidden so there's no
   flash of the real tool before assets/auth.js's enforceGate() resolves —
   it either removes the attribute (signed in, CSS below stops matching) or
   replaces the page with a lock screen (signed out). */
body[data-requires-auth] .page { visibility: hidden; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  padding: 8px 16px;
  border: 2.5px solid var(--text);
  border-radius: 999px;
  background: #fff;
  box-shadow: 2px 2px 0 var(--text);
  margin-bottom: 22px;
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease), background 150ms var(--ease);
}
.back-link:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--text); background: var(--em-xlight); }

/* utils.js wraps .back-link in this row and appends .pdf-btn next to it,
   on every calculator page (so the row only needs styling here, once). */
.back-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}
.back-link-row .back-link { margin-bottom: 0; }
.pdf-btn { display: inline-flex; align-items: center; gap: 7px; }

.tool-header {
  margin-bottom: 26px;
}
.tool-header h1 {
  font-size: clamp(24px, 4vw, 30px);
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -0.4px;
  color: var(--text);
}
.tool-header p {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
  max-width: 640px;
  line-height: 1.6;
}
.eyebrow {
  display: inline-block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--em-dark);
  background: var(--em-xlight);
  border: 2px solid var(--em);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 12px;
}

.client-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 22px;
}
.client-row .field { flex: 1; min-width: 220px; max-width: 320px; }

/* ---- Card (clay) ---- */
.card {
  background: var(--card);
  border: 3px solid var(--text);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--text);
  padding: 24px 26px;
  margin-bottom: 22px;
}
.card.clay-green { box-shadow: 5px 5px 0 var(--em); }
.card.clay-yellow { box-shadow: 5px 5px 0 var(--yellow); }
.card.clay-blue { box-shadow: 5px 5px 0 var(--blue); }
.card.clay-purple { box-shadow: 5px 5px 0 var(--purple); }
.card.clay-pink { box-shadow: 5px 5px 0 var(--pink); }
.card.clay-orange { box-shadow: 5px 5px 0 var(--orange); }

.card h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 16px;
  letter-spacing: -0.1px;
  color: var(--text);
}
.card h2::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--em);
  border: 2px solid var(--text);
  flex: none;
}
.card.clay-yellow h2::before { background: var(--yellow); }
.card.clay-blue h2::before { background: var(--blue); }
.card.clay-purple h2::before { background: var(--purple); }
.card.clay-pink h2::before { background: var(--pink); }
.card.clay-orange h2::before { background: var(--orange); }

.card-head-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.card-head-row h2 { margin: 0; }
.card-head-row .grand-total { font-family: "Space Grotesk", sans-serif; font-size: 18px; font-weight: 800; color: var(--em-dark); }
.card-sub { font-size: 13px; color: var(--text-muted); margin: 0 0 16px; line-height: 1.6; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px 18px;
}

/* .field is a grid item inside .grid, which stretches every field in a row
   to the height of the tallest one by default — but a plain block .field
   doesn't use that extra height, so a field whose label wraps to 2 lines
   ends up with its input sitting lower than the single-line labels next to
   it in the same row. Making .field a flex column and pushing the input/
   select to the bottom (margin-top: auto) means every input in a row lines
   up on the same baseline regardless of how many lines its label took. */
.field {
  display: flex;
  flex-direction: column;
}

.field label {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* ---- Inputs (clay: thick border, offset shadow) ---- */
.field input[type="text"],
.field input[type="number"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="date"],
.field input[type="url"],
.field select {
  width: 100%;
  padding: 11px 14px;
  border: 2.5px solid var(--text);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: #fff;
  text-align: right;
  box-shadow: 3px 3px 0 var(--text);
  transition: box-shadow 150ms var(--ease), transform 150ms var(--ease), border-color 150ms var(--ease);
}
/* Bottom-align the input/select itself within the now-flex .field, so a
   2-line label doesn't push this field's input lower than a neighboring
   field (in the same .grid row) whose label only took one line. */
.field > input[type="text"],
.field > input[type="number"],
.field > input[type="tel"],
.field > input[type="email"],
.field > input[type="date"],
.field > input[type="url"],
.field > select {
  margin-top: auto;
}
.field select { text-align: left; font-variant-numeric: normal; padding-right: 30px; }
.field input:hover, .field select:hover { transform: translate(-1px, -1px); box-shadow: 4px 3px 0 var(--text); }
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--em);
  box-shadow: 4px 4px 0 var(--em);
  transform: translate(-1px, -1px);
}
/* Zero-JS validation cue: number inputs already carry min/max attributes
   everywhere in the toolkit, but nothing ever showed when a typed value
   broke them — :out-of-range is native browser support for exactly that,
   so every one of the 33 calculators gets a visible "this value is off"
   signal for free, without a new validation-message component. Left
   un-styled while empty/untouched (browsers don't match :out-of-range on
   an empty number input) so blank-by-default forms don't open already
   flagged red. */
.field input:out-of-range {
  border-color: var(--red);
  box-shadow: 3px 3px 0 var(--red);
}
.field input:out-of-range:focus {
  box-shadow: 4px 4px 0 var(--red);
}

.field-row { display: flex; align-items: center; gap: 8px; }
.field-row label { margin-bottom: 0; flex: 1; }
.field-row .cs-select { flex: 1; margin-top: 0; }

/* ---- Custom dropdown (clay-styled replacement for <select>'s native
   options popup, which the browser/OS renders and CSS can't restyle).
   utils.js progressively enhances every <select> into this widget on
   load; the original <select> stays in the DOM (visually hidden) so
   existing calculator JS reading/setting .value keeps working unchanged. ---- */
.cs-select { position: relative; margin-top: auto; }
.cs-select select.cs-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.cs-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  border: 2.5px solid var(--text);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  font-weight: 500;
  color: var(--text);
  background: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--text);
  transition: box-shadow 150ms var(--ease), transform 150ms var(--ease), border-color 150ms var(--ease);
}
.cs-trigger:hover { transform: translate(-1px, -1px); box-shadow: 4px 3px 0 var(--text); }
.cs-select.is-open .cs-trigger,
.cs-trigger:focus-visible {
  outline: none;
  border-color: var(--em);
  box-shadow: 4px 4px 0 var(--em);
  transform: translate(-1px, -1px);
}
.cs-trigger:disabled { cursor: not-allowed; opacity: 0.55; box-shadow: 2px 2px 0 var(--text); transform: none; }
.cs-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-trigger-arrow {
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid var(--text);
  border-bottom: 2.5px solid var(--text);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 150ms var(--ease);
  margin-top: -3px;
}
.cs-select.is-open .cs-trigger-arrow { transform: rotate(-135deg) translateY(-1px); margin-top: 3px; }

.cs-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 264px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 2.5px solid var(--text);
  border-radius: var(--radius-sm);
  box-shadow: 4px 4px 0 var(--text);
  display: none;
}
.cs-select.is-open .cs-menu { display: block; animation: csMenuIn 130ms var(--ease); }
@keyframes csMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.cs-option {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--text);
  cursor: pointer;
  transition: background 100ms ease;
}
.cs-option.is-active { background: var(--em-xlight); }
.cs-option.is-selected { background: var(--em); color: #fff; font-weight: 700; }
.cs-option.is-selected.is-active { background: var(--em-dark); }
.cs-option.is-disabled { opacity: 0.4; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .cs-menu, .cs-trigger-arrow { animation: none !important; transition: none !important; }
}

/* ---- Segmented controls ---- */
.radio-group, .toggle-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.radio-group button, .toggle-group button {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 2.5px solid var(--text);
  background: #fff;
  color: var(--text);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--text);
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease), background 150ms var(--ease), color 150ms var(--ease);
}
.radio-group button:hover, .toggle-group button:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--text); }
.radio-group button.active, .toggle-group button.active {
  background: var(--em);
  color: #fff;
  box-shadow: 3px 3px 0 var(--em-dark);
}

/* ---- Stepper ---- */
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper button {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2.5px solid var(--text);
  background: #fff;
  font-size: 17px;
  font-family: inherit;
  cursor: pointer;
  color: var(--text);
  box-shadow: 2px 2px 0 var(--text);
  transition: background 150ms var(--ease), transform 150ms var(--ease), box-shadow 150ms var(--ease);
}
.stepper button:hover { background: var(--em-xlight); border-color: var(--em); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--em); }
.stepper output { min-width: 28px; text-align: center; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; font-family: "Space Grotesk", sans-serif; }

/* ---- Table ---- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { padding: 10px 12px; border-bottom: 1.5px dashed rgba(26, 26, 46, 0.15); text-align: right; font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: left; font-variant-numeric: normal; }
thead th {
  color: var(--text-muted); font-weight: 700; font-size: 11px;
  font-family: "Space Grotesk", sans-serif;
  text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 2.5px solid var(--text);
  background: transparent;
}
tfoot td { border-bottom: none; border-top: 2.5px solid var(--text); padding-top: 12px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

td input[type="number"], td input[type="text"] {
  min-width: 90px;
  width: 100%;
  padding: 7px 10px;
  border: 2px solid var(--text);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: #fff;
  text-align: right;
  box-shadow: 2px 2px 0 var(--text);
  transition: box-shadow 150ms var(--ease), border-color 150ms var(--ease);
}
td input[type="text"] { text-align: left; font-variant-numeric: normal; }
td input:focus { outline: none; border-color: var(--em); box-shadow: 2px 2px 0 var(--em); }
td input[type="text"].row-label { border-style: dashed; box-shadow: none; }
td select {
  padding: 6px 8px;
  border: 2px solid var(--text);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  background: #fff;
  color: var(--text);
}
td select:focus { outline: none; border-color: var(--em); }

/* ---- Result hero ---- */
.result-hero {
  position: relative;
  overflow: hidden;
  background: var(--em);
  color: #fff;
  border: 3px solid var(--text);
  border-radius: var(--radius);
  padding: 26px 26px 24px;
  margin-bottom: 20px;
  box-shadow: 6px 6px 0 var(--text);
}
.result-hero .label {
  position: relative; font-family: "Space Grotesk", sans-serif; font-size: 12.5px; font-weight: 700;
  opacity: 0.95; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em;
}
.result-hero .value {
  position: relative; font-family: "Space Grotesk", sans-serif; font-size: 34px; font-weight: 800;
  letter-spacing: -0.5px; font-variant-numeric: tabular-nums;
}
.result-hero .sub { position: relative; font-size: 13.5px; opacity: 0.95; margin-top: 8px; }
.result-hero .stat-row { position: relative; display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.result-hero .stat {
  min-width: 120px; flex: 1;
  background: rgba(255, 255, 255, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  padding: 10px 14px;
}
.result-hero .stat .stat-label { font-family: "Space Grotesk", sans-serif; font-size: 11px; opacity: 0.92; text-transform: uppercase; letter-spacing: 0.04em; }
.result-hero .stat .stat-value { font-family: "Space Grotesk", sans-serif; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 3px; }

/* ---- Flags / pills ---- */
.flag {
  border: 2px solid var(--text);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 500;
  margin-top: 12px;
  box-shadow: 3px 3px 0 var(--text);
}
.flag.good { background: var(--em-xlight); color: #0b5c47; border-color: var(--em); box-shadow: 3px 3px 0 var(--em); }
.flag.warn { background: var(--yellow-light); color: #7a4a06; border-color: var(--yellow); box-shadow: 3px 3px 0 var(--yellow); }
.flag.bad { background: var(--red-light); color: #8a1f18; border-color: var(--red); box-shadow: 3px 3px 0 var(--red); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; border: 1.5px solid transparent; }
.pill.good { background: var(--em-xlight); color: var(--em-dark); border-color: var(--em); }
.pill.warn { background: var(--yellow-light); color: #92620a; border-color: var(--yellow); }
.pill.bad { background: var(--red-light); color: #b3261e; border-color: var(--red); }

.disclaimer {
  font-size: 11.5px;
  color: var(--text-muted);
  border-top: 2px dashed rgba(26, 26, 46, 0.15);
  padding-top: 16px;
  margin-top: 28px;
}

/* ---- Buttons ---- */
.actions { display: flex; gap: 10px; margin: 4px 0 18px; flex-wrap: wrap; }
.btn {
  padding: 10px 20px;
  border-radius: 999px;
  border: 2.5px solid var(--text);
  background: #fff;
  font-weight: 700;
  font-size: 13.5px;
  font-family: "Space Grotesk", sans-serif;
  cursor: pointer;
  color: var(--text);
  box-shadow: 3px 3px 0 var(--text);
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease), background 150ms var(--ease);
}
.btn.primary { background: var(--em); border-color: var(--text); color: #fff; box-shadow: 3px 3px 0 var(--em-dark); }
.btn.primary:hover { box-shadow: 4px 4px 0 var(--em-dark); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--bg); box-shadow: none; transform: none; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--text); }
.btn:active { transform: translate(0, 0); box-shadow: 2px 2px 0 var(--text); }
.add-row-btn { margin-top: 12px; padding: 8px 16px; font-size: 12.5px; box-shadow: 2px 2px 0 var(--text); }
.add-row-btn:hover { box-shadow: 3px 3px 0 var(--text); }

.btn:focus-visible,
.radio-group button:focus-visible,
.toggle-group button:focus-visible,
.stepper button:focus-visible,
.row-remove:focus-visible,
.back-link:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 2px;
}

.row-remove {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--text);
  background: #fff;
  color: var(--red);
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms var(--ease), color 150ms var(--ease), transform 150ms var(--ease);
}
.row-remove:hover { background: var(--red); color: #fff; transform: translate(-1px, -1px); }

/* ---- Sticky section quick-nav (dense multi-section calculators) ---- */
.section-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 2px 14px;
  margin: 0 0 20px;
  background: var(--bg);
  border-bottom: 2.5px solid var(--text);
  scrollbar-width: none;
}
.section-nav::-webkit-scrollbar { display: none; }
.section-nav a {
  flex: none;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 16px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 2.5px solid var(--text);
  background: #fff;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 3px 3px 0 var(--text);
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease), background 150ms var(--ease), color 150ms var(--ease);
}
.section-nav a:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--text); }
.section-nav a.active { background: var(--em); color: #fff; box-shadow: 3px 3px 0 var(--em-dark); }
.section-nav a:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }

/* ---- Collapsible category blocks (clay-lite, tinted by category) ---- */
details.cat-block {
  border: 2px solid var(--cat-color, var(--text));
  background: var(--cat-bg, #fff);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 14px;
}
details.cat-block:last-child { margin-bottom: 0; }
details.cat-block.cat-green  { --cat-color: var(--em);     --cat-bg: var(--em-xlight); }
details.cat-block.cat-yellow { --cat-color: var(--yellow); --cat-bg: var(--yellow-light); }
details.cat-block.cat-blue   { --cat-color: var(--blue);   --cat-bg: var(--blue-light); }
details.cat-block.cat-purple { --cat-color: var(--purple); --cat-bg: var(--purple-light); }
details.cat-block.cat-pink   { --cat-color: var(--pink);   --cat-bg: var(--pink-light); }
details.cat-block.cat-orange { --cat-color: var(--orange); --cat-bg: var(--orange-light); }

details.cat-block > summary.cat-head {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 8px;
}
details.cat-block > summary.cat-head::-webkit-details-marker { display: none; }
details.cat-block > summary.cat-head:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.cat-head h3 { font-size: 12.5px; margin: 0; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; color: var(--text); }
.cat-head .cat-total { font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 800; color: var(--text-muted); }
.cat-head-right { display: flex; align-items: center; gap: 10px; flex: none; }
.chevron {
  width: 8px; height: 8px;
  border-right: 2.5px solid var(--cat-color, var(--text));
  border-bottom: 2.5px solid var(--cat-color, var(--text));
  transform: rotate(45deg);
  transition: transform 150ms var(--ease);
  flex: none;
}
details.cat-block[open] > summary.cat-head .chevron { transform: rotate(-135deg); }
details.cat-block[open] > summary.cat-head { margin-bottom: 12px; }
details.cat-block .table-wrap { background: #fff; border-radius: 10px; padding: 2px 8px; }

/* Applied to <body> by utils.js only for the moment it's snapshotting the
   page into a PDF (html2canvas + jsPDF — see generatePdf() there): hides
   the same UI-only chrome as @media print below and forces collapsed
   category sections open, so the PDF always shows everything regardless
   of what's expanded on screen when Download PDF was clicked. Screen
   layout/spacing is otherwise left as-is — pagination across pages is
   handled in JS, not by shrinking things to fit. */
.pdf-export-mode .back-link-row,
.pdf-export-mode .actions,
.pdf-export-mode .section-nav,
.pdf-export-mode .row-remove,
.pdf-export-mode .add-row-btn,
.pdf-export-mode .stepper button,
.pdf-export-mode .cs-menu,
.pdf-export-mode .cs-trigger-arrow,
.pdf-export-mode #fullscreen-loader { display: none !important; }
.pdf-export-mode details.cat-block:not([open]) > :not(summary) { display: block !important; }
.pdf-export-mode .chevron { display: none !important; }

/* generatePdf() (in utils.js) captures each .card independently at its own
   on-screen width, then stretches every one of those images to the SAME
   full PDF page width — correct only when every card was the same width
   on screen to begin with. The wide sidebar layout breaks that assumption:
   a ~300px-wide sidebar card and a ~1000px-wide main-column card both get
   stretched to the same page width, so the sidebar one balloons up wildly
   relative to its own content. Collapsing the sidebar grid back to a
   single stacked column for the moment of capture — the same collapse
   that already happens on screen below 900px — makes every card uniformly
   full-width again, which is what the exporter actually assumes. */
.pdf-export-mode .tool-layout { grid-template-columns: 1fr !important; }
.pdf-export-mode .tool-sidebar { position: static !important; }

/* The collapse above reflows the actual live page, not a hidden copy of
   it — so without this, the advisor watches the two-column layout visibly
   fall back to one column, sit there while html2canvas captures it, then
   snap back once the export finishes. This covers the page for exactly
   that window instead, the way a loading state normally would. */
.pdf-export-mode { overflow: hidden; }
.pdf-export-mode::after {
  content: "Preparing your PDF…";
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
}

.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }

/* ---- Charts (Chart.js canvases) ----
   Shared wrapper/legend styling for every calculator chart, generalized
   from the pattern first built for home-loan-emi.html's payment-breakdown
   donut so later charts don't redefine this per page. Layout only — chart
   colors/data are wired per calculator in that page's own <script>. */
/* Every current calculator that uses .chart-layout only ever puts one
   chart inside it — the 2-column grid this used to be left it stranded in
   the left half of the card instead of centered, since a lone grid item
   just occupies column 1 of 2 and there's no second item to balance it.
   Single column lets each chart's own centering (donut-wrap's margin:0
   auto, or the inline max-width/margin:0 auto some pages set directly)
   actually center it across the full card width. */
.chart-layout { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }

.donut-wrap { position: relative; width: 100%; max-width: 260px; margin: 0 auto; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.donut-center .dl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; font-family: "Space Grotesk", sans-serif; }
.donut-center .dv { font-size: 15px; font-weight: 800; margin-top: 2px; }

/* Chart.js's own docs call this out: a responsive canvas needs a container
   with an explicit height, or the canvas (whose own size Chart.js is
   driving) and the container (whose height would otherwise come from the
   canvas) can fight over height on resize/update, leading to unstable or
   blank paints. Height here must match the canvas element's own `height`
   attribute set inline on the page that uses it. */
.line-chart-wrap, .bar-chart-wrap { position: relative; width: 100%; height: 220px; }
.line-chart-wrap canvas, .bar-chart-wrap canvas { max-width: 100%; }

.legend-row { display: flex; justify-content: center; gap: 20px; margin-top: 14px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--text); flex: none; }
.legend-dot.square { border-radius: 3px; }

@media (max-width: 640px) {
  .line-chart-wrap, .bar-chart-wrap { overflow-x: auto; }
}

@media print {
  /* Comfortable margin all around, so text isn't sitting right at the
     paper edge — a bit more on the right specifically, since cards'
     offset shadow bleeds a few px past their own right edge and needs
     that room or it reads as content getting clipped. */
  @page { margin: 18mm 20mm 18mm 18mm; }

  /* Print "compact mode" — the on-screen spacing/shadow sizing was made
     for a comfortable scrolling screen, not a fixed page: at full size,
     content that almost-but-not-quite fit a page (like a card followed by
     the result-hero) got pushed whole onto the next page, leaving a large
     blank gap at the bottom of the page before it. This only tightens the
     spacing BETWEEN and WITHIN elements (card padding, gaps, shadow
     offsets) — the @page margin above is what controls distance from the
     paper edge, kept generous on its own. */
  html { font-size: 15px; }
  .card {
    padding: 20px 22px;
    margin-bottom: 16px;
    border-width: 2.5px;
    box-shadow: 3px 3px 0 var(--text);
  }
  .card.clay-green { box-shadow: 3px 3px 0 var(--em); }
  .card.clay-yellow { box-shadow: 3px 3px 0 var(--yellow); }
  .card.clay-blue { box-shadow: 3px 3px 0 var(--blue); }
  .card.clay-purple { box-shadow: 3px 3px 0 var(--purple); }
  .card.clay-pink { box-shadow: 3px 3px 0 var(--pink); }
  .card.clay-orange { box-shadow: 3px 3px 0 var(--orange); }
  .result-hero { padding: 20px 22px 18px; margin-bottom: 16px; border-width: 2.5px; box-shadow: 4px 4px 0 var(--text); }
  .result-hero .value { font-size: 27px; }
  .result-hero .stat { padding: 9px 12px; }
  .tool-header { margin-bottom: 18px; }
  .tool-header h1 { font-size: 23px; }
  .tool-header p { font-size: 13.5px; }
  .card-sub { font-size: 12.5px; margin-bottom: 13px; }
  .field label { font-size: 11px; margin-bottom: 5px; }
  .field input, .field select, .cs-trigger {
    padding: 9px 12px;
    font-size: 13.5px;
    border-width: 2px;
    box-shadow: 2px 2px 0 var(--text);
  }
  .grid { gap: 12px 14px; }
  .radio-group button, .toggle-group button { padding: 7px 14px; font-size: 12.5px; box-shadow: 2px 2px 0 var(--text); }
  .radio-group button.active, .toggle-group button.active { box-shadow: 2px 2px 0 var(--em-dark); }
  .flag { padding: 9px 13px; font-size: 13px; }
  .flag.good { box-shadow: 2px 2px 0 var(--em); }
  .flag.warn { box-shadow: 2px 2px 0 var(--yellow); }
  .flag.bad { box-shadow: 2px 2px 0 var(--red); }

  /* Browsers strip background colors/images from print output by default
     ("background graphics" is opt-in in the print dialog) unless told
     otherwise — without this, every clay card's colored shadow, the
     emerald result-hero, and any bg-tinted element would print as plain
     white, which is what was actually making the PDF look like bare
     unstyled HTML. This forces WYSIWYG: printed output matches the
     on-screen clay+glass design, colors and all. */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* UI-only chrome that means nothing on paper */
  .back-link-row, .back-link, .pdf-btn, .actions, .section-nav,
  .row-remove, .add-row-btn, .stepper button,
  .cs-menu, .cs-trigger-arrow, #fullscreen-loader { display: none !important; }

  .page { max-width: none; padding: 0; }

  /* Force every collapsible category block open — a client shouldn't get a
     PDF that's missing sections just because they were collapsed on
     screen when Download PDF was clicked. */
  details.cat-block:not([open]) > :not(summary) { display: block !important; }
  details.cat-block > summary.cat-head { cursor: default; }
  .chevron { display: none !important; }

  /* The actual "no cuts" fix: keep each self-contained block intact
     instead of letting the browser split it across a page boundary.
     break-inside is the current standard; page-break-inside is kept
     alongside it for older print engines that only honor that name. */
  .card, .result-hero, .field, .client-row, .tool-header, details.cat-block,
  .flag, table, tr, .donut-wrap {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }

  /* A digital 1040px-wide layout is wider than a printed page — cap the
     field grid to 2 columns so labels/values stay legible instead of
     squeezing to fit whatever auto-fit computed for screen width. */
  .grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .field input, .field select, .radio-group button, .toggle-group button,
  .stepper button, .btn, .back-link, .section-nav a,
  details.cat-block > summary.cat-head, .chevron { transition: none; }
}

@media (max-width: 640px) {
  .page { padding: 20px 16px 52px; }
  .result-hero .value { font-size: 27px; }
  .card { padding: 18px; box-shadow: 4px 4px 0 var(--text); }
  .card.clay-green { box-shadow: 4px 4px 0 var(--em); }
  .card.clay-yellow { box-shadow: 4px 4px 0 var(--yellow); }
  .card.clay-blue { box-shadow: 4px 4px 0 var(--blue); }
  .card.clay-purple { box-shadow: 4px 4px 0 var(--purple); }
  .card.clay-pink { box-shadow: 4px 4px 0 var(--pink); }
  .card.clay-orange { box-shadow: 4px 4px 0 var(--orange); }
}